<template>
	<view class="content">
		<view class="tab">
			<view class="tabBars" :style="tabStyle(index)" v-for="(item,index) in tabBars"
				@click="tabChange(item.status)">
				{{item.text}}
				<view class="tabBottom" :style="tabBottomStyle(item.status)"> </view>
			</view>
		</view>
		<skeleton :loading="loading">
			<view class="" v-if="list.length>0">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="list_top">
						<view class="list_serviceName">
							{{item.serviceName}}<text v-if="item.num>1">×{{item.num}}</text>
						</view>
						<view class="list_status" :style="showStyle(item.status)">
							{{showStatus(item.status,item)}}
						</view>
					</view>
					<view class="list_split">

					</view>
					<view class="list_name">
						<image src="../../../static/icon/order/name.png" alt=""></image>{{item.name}}
					</view>
					<view class="list_name">
						<image src="../../../static/icon/order/address.png" alt="" style="height: 36rpx; top: 6rpx;">
						</image>
						<view class="">
							{{item.address}}
						</view>
					</view>
					<!-- <view class="list_name">
						<image src="../../../static/icon/order/price.png" alt="" style="height: 36rpx; top: 6rpx;">
						</image>
						<view class="">
							佣金：{{item.price}}
						</view>
					</view> -->
					<view class="list_bottom">
						<view class="">
							<view class="price" v-if="item.status ==2">
								￥{{item.price}}
							</view>
						</view>
						<view class="button-gropp">
							<view v-if="item.status !=2" class="list_detaile" @click="moveTo(item)">查看详情</view>
							<view v-if="item.status ==2" class="list_detaile" @click="updateEvaluateOrder(item,1)">
								接受订单
							</view>
							<view v-if="item.status ==2" class="list_detaile  white-button"
								@click="updateEvaluateOrder(item,2,index)">取消订单
							</view>
						</view>
						<!-- {{item.number}} -->

					</view>
				</view>
			</view>

			<view class="none" v-if="list.length<1">
				<image src="../../../static/none/order.png" mode="" style="width: 442rpx;
				height: 354rpx;
				display: block;
				margin:0 auto;
				margin-top: 180rpx;"></image>
				<view class="noneTitle" style="text-align:center;
				font-size: 36rpx;1114174////]]][//？？]
				font-weight: 500;
				color: #3E3E3E;
				text-align: center;
				font-size: 36rpx;
				font-weight: 500;
				color: #3E3E3E;
				text-align: center;
				margin-top:80rpx;">暂无订单~</view>
			</view>
			<!-- 加载更多 h5端底部导航会遮盖住它 -->
			<view style="background: rgba(216, 216, 216, 0);" v-if="isReachBottom && list.length!=0">
				<uni-load-more :status="more" @clickLoadMore="loadMore"></uni-load-more>
			</view>
		</skeleton>
		<!-- <uni-popup ref="popup" type="center" :mask-click="false" >
			<uni-popup-dialog mode="base" title="ti123" content="qwerdf" message="成功消息" :duration="2000" :before-close="true" @close="" @confirm="">
			</uni-popup-dialog>
		</uni-popup> -->
		<!-- 返回顶部 -->
		<back-top :scrollTop='scrollTop'></back-top>

		<!-- 服务时间修改温馨提示 -->
		<tipPopup ref="tipRef" @onOk="onOk" />
	</view>
</template>
<script>
	import backTop from '../../../components/uni-ui/back-top/back-top.vue';
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	import tipPopup from './components/tip.vue'
	import uniPopupDialog from '@/components/uni-ui/uni-popup-dialog/uni-popup-dialog.vue'
	import refresh from '@/components/common/refresh/index.vue'
	import {
		nurseSelectOrderList,
		sonOrderList,
		updateEvaluateOrder
	} from '@/apis/order/index.js'
	import uploadImage from '@/common/js/ossutil/uploadFile.js'
	import uniLoadMore from '@/components/uni-ui/uni-load-more/uni-load-more.vue';
	import skeleton from '@/components/common/skeleton/order.vue'
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	export default {
		components: {
			refresh,
			uniPopup,
			uniLoadMore,
			skeleton,
			uniPopupDialog,
			backTop,
			tipPopup
		},
		data() {
			return {
				scrollTop: 0,
				tabBars: [{
					text: '全部',
					status: ''
				}, {
					text: '待接单',
					status: 2
				}, {
					text: '未完成',
					status: 3
				}, {
					text: '已完成',
					status: 5
				}],
				//判断tab切换样式
				tabNum: 0,
				state: '', //  2待接单 ''全部 3已接单 4服务中 6已完成
				page: {
					nurseCity: this.$store.state.userInfo.address,
					nurseId: this.$store.state.userInfo.id,
					pageNum: 1,
					pageSize: 7,
					status: '',
				}, //分页查询内容
				list: [], //订单列表
				loading: true,
				more: 'loading', //more/loading/noMore
				isReachBottom: false,
				tipMap: {
					1: '是否确定接受该订单',
					2: '是否确定拒绝该订单'
				}
			}
		},
		onLoad() {
			//开始下拉刷新
			// console.log('触发了onLoad')
			// uni.startPullDownRefresh();
			// if(this.list.length<1){
			this.loading = true
			this.list = []
			this.clearStatus()
			this.getOrder()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.loading = true
			this.clearStatus()
			this.getOrder()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onShow() {
			if (!this.loading && this.list.length < 7) {
				this.loading = true
				this.list = []
				this.clearStatus()
				this.getOrder()
			}
		},
		computed: {

			tabStyle(index) {
				return function(index) {
					if (this.tabNum == index) {
						return `font-weight: 500;color: #333333;`
					} else {
						return false
					}

				}
			},
			tabBottomStyle(index) {
				return function(index) {
					if (this.tabNum == index) {
						return `display:block;`
					} else {
						return false
					}

				}
			},
		},
		// 触底
		// 页面触底
		onReachBottom() {
			console.log('页面触底了---');
			if (this.more == 'noMore') return;
			this.isReachBottom = true;
			this.page.pageNum++;
			// 显示加载更多数据
			this.more = 'loading';
			this.getOrder();
		},
		methods: {
			updateEvaluateOrder(item, status, index = 0) {

				uni.showModal({
					content: this.tipMap[status],
					success: (res) => {
						if (res.confirm) {
							let form = {
								number: item.number,
								status: status
							}
							updateEvaluateOrder(form).then(res => {
								console.log(res)
								if (status == 1) {
									item.status = 3
									uni.showToast({
										title: '已成功接单'
									})
								} else {
									this.list.splice(index, 1)
									uni.showToast({
										title: '已拒绝接单'
									})
								}
							})
						}
					}
				})

			},
			onOk() {
				this.list = []
				this.clearStatus()
				this.loading = true
				this.getOrder()
			},
			tabChange(index) {
				if (this.tabNum == index) return
				this.loading = true
				this.tabNum = index
				this.page.status = index
				this.page.pageNum = 1
				this.more = 'loading';
				this.list = []
				this.isReachBottom = false
				// if (index == 0) {
				// 	this.page.status = ''
				// } else if (index == 1) {
				// 	this.page.status = 3
				// } else if (index == 2) {
				// 	this.page.status = 5
				// }
				this.getOrder()
				// console.log(this.tabNum)
			},
			//查看订单详情
			async moveTo(item) {
				console.log("item", item)
				// 
				if (item.updatedScheduleTime && item.whetherGoOn === null) {
					return this.$nextTick(() => {
						console.log("this.$refs.tipRef", this.$refs.tipRef.show)
						this.$refs.tipRef.show(item)
					})
				}
				uni.navigateTo({
					url: '../../order/sub-order/sub-order?number=' + item.number + '&status=' + item.status
				})
			},
			//获取订单
			async getOrder() {
				let res = await nurseSelectOrderList(this.page)
				console.log('获取进行中的单子', this.page)
				if (res.success) {
					if (res.object.records.length > 0) {
						if (this.isReachBottom) {
							this.list.push(...res.object.records);
						} else {
							this.list = res.object.records;
						}
						let flag = res.data
						this.$store.commit('getUncompleteOrder', flag)
					} else {
						if (this.isReachBottom) {
							this.more = 'noMore';
							this.page.pageNum = 1;
						} else {
							this.list = [];
							this.isReachBottom = false;
						}
					}
				}

				this.loading = false
			},
			//状态
			showStatus(status) {
				if (status == 5) {
					return '已完成'
				} else if (status == 6) {
					return '已取消'
				} else if (status == 7) {
					return '已退款'
				} else if (status == 8) {
					return '异常'
				} else if (status == 9) {
					return '退款中'
				} else if (status == 10) {
					return '已拒绝'
				} else {
					return '未完成'
				}
			},
			//状态样式 
			showStyle(status) {
				if (status == 5) {
					return `color:rgba(51, 51, 51, 1);`
				} else if (status == 6) {
					return `color:rgba(153, 153, 153, 1);`
				} else if (status == 7) {
					return `color:rgba(51, 51, 51, 1);`
				} else if (status == 8) {
					return `color:rgba(255, 79, 79, 1);`
				} else if (status == 9) {
					return `color:rgba(255, 79, 79, 1);`
				} else if (status == 10) {
					return `color:rgba(153, 153, 153, 1);`
				} else {
					return 'color: rgba(255, 106, 0, 1);'
				}
			},
			loadMore() {
				console.log('加载更多');
			},
			clearStatus() {
				this.page.pageNum = 1;
				this.isReachBottom = false;
				this.more = 'more';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		// height: 100vh;
		min-height: 100vh;
		background: rgba(243, 246, 246, 1);
		width: 100%;
	}

	.tab {
		position: sticky;
		top: 0;
		z-index: 1;
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		padding: 0 58rpx;
		box-sizing: border-box;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);

	}

	.tabBars {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 400;
		color: #666666;
		position: relative;

		.tabBottom {
			width: 100%;
			height: 6rpx;
			background-color: #3C8EFF;
			border-radius: 3rpx;
			display: none;
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			transition: all 10s;
		}
	}

	.list {
		margin: 0 auto;
		width: 710rpx;
		background: #FFFFFF;
		padding: 28rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		// display: flex;
		// justify-content: space-between;
		margin-top: 16rpx;

		.list_top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.list_serviceName {
				font-size: 32rpx;
				color: #333333;
			}

			.list_status {
				font-size: 28rpx;
				color: #333333;
			}
		}

		.list_split {
			width: 634rpx;
			height: 2rpx;
			background: rgba(240, 240, 240, 0.6);
			margin: 28rpx auto;
		}

		.list_name {
			margin-bottom: 16rpx;
			font-size: 28rpx;
			position: relative;
			box-sizing: border-box;

			image {
				height: 16rpx;
				width: 16rpx;
			}

			image {
				float: left;
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
				display: block;
				top: 8rpx;
			}
		}

		.list_bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.button-gropp {
				display: flex;
			}

			.price {
				font-size: 36rpx;
				color: #e93b4c;
			}

			.list_detaile {
				width: 160rpx;
				height: 72rpx;
				background: #3C8EFF;
				border-radius: 20rpx;
				line-height: 72rpx;
				text-align: center;
				color: #FFFFFF;
				margin-left: 18rpx;
			}

			.white-button {
				background: rgba(0, 0, 0, 0);
				border: 1px solid #D1D5DB;
				color: #4B5563;
			}
		}
	}

	.none {
		image {
			width: 460rpx;
			height: 460rpx;
			display: block;
			padding-top: 160rpx;
			margin: 0 auto;
		}
	}
</style>